@import "../themes/default";

@prefixCls: vm-popover;
@tooltip: tooltip;
@listPrefixCls: vm-list;

.@{prefixCls}-mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  z-index: 999;
}

.@{tooltip} {
  display: block !important;
  z-index: 10000;

  .@{tooltip}-inner {
    background: @fill-base;
    color: @color-text-base;
    border-radius: 3px;
  }

  .@{tooltip}-arrow {
    width: 0;
    height: 0;
    position: absolute;
    margin: 5px;
    border-style: solid;
    border-color: black;
    z-index: 1;
  }

  &[x-placement^="top"] {
    margin-bottom: 5px;

    .@{tooltip}-arrow {
      border-width: 5px 5px 0 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      bottom: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="bottom"] {
    margin-top: 5px;

    .@{tooltip}-arrow {
      border-width: 0 5px 5px 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="right"] {
    margin-left: 5px;

    .@{tooltip}-arrow {
      border-width: 5px 5px 5px 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[x-placement^="left"] {
    margin-right: 5px;

    .@{tooltip}-arrow {
      border-width: 5px 0 5px 5px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &.popover {

    .popover-inner {
      background: @fill-base;
      color: @color-text-base;
      border-radius: 3px;
      box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);

      .@{listPrefixCls}-body {
        border: none;
      }

      .@{listPrefixCls},
      .@{listPrefixCls}-body{
        border-radius: 3px;
      }

      .@{listPrefixCls}-item{
        padding: 0 10px;
      }

      .@{listPrefixCls}-item:first-child{
        border-radius: 3px 3px 0 0;
      }
      .@{listPrefixCls}-item:last-child{
        border-radius: 0 0 3px 3px;
      }
    }

    .popover-arrow {
      border-color: @fill-base;
    }
  }

  &[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
}
